import React from 'react';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import Loader from './../components/Loader/Loader';
import SiderMenu from './../components/MainLayout/SiderMenu';
import HeaderComponent from './../components/MainLayout/Header';
import Login from './../routes/Login/Login';
import Error from './Error/Error';
import config from './../utils/config';
import { Layout, BackTop } from 'antd';

const { Content, Footer } = Layout;

const Dashboard = ({ children, location, dispatch, loading, dashboard }) => {
    const { isCollapsed, themeStyle, hasPermissions, menu } = dashboard;
    if (location.pathname === '/login') {
        return (
            <div>
                <Loader fullScreen spinning={ loading.effects['dashboard/query'] } />
                <Login />
            </div>
        )
    }

    let temp = window.localStorage.getItem('taken');

    const HeaderProps = {
        username: temp,
        collapsed: isCollapsed,
        toggle(){
            dispatch({
                type: 'dashboard/updateState',
                payload:{
                    isCollapsed: !isCollapsed
                }
            })
        },
        handleClickMenu(e){
            switch (e.key){
                case 'logout':
                    dispatch({type: 'dashboard/logout'});
                    break;
                case 'user':
                    break;
                case 'setting':
                    break;
                default:
            }
        },
    };

    const SiderMenuProps = {
        menu,
        themeStyle: themeStyle,
        collapsed: isCollapsed
    };

    return (
        <Layout style={{height: '100vh'}}>
            <Loader fullScreen spinning={loading.effects['dashboard/query']} />
            <SiderMenu {...SiderMenuProps} />
            <Layout id="mainContainer">
                <BackTop target={() => document.getElementById('mainContainer')} />
                <HeaderComponent {...HeaderProps}/>
                <Content style={{ margin: '50px 24px 0px',background: '#fff'}}>
                    { hasPermissions ? children: <Error/> }
                </Content>
                <Footer style={{textAlign:'center',height:'50px'}}>
                    { config.footerText }
                </Footer>
            </Layout>
        </Layout>
    )
};

export default withRouter(connect(({ app, loading, dashboard }) => ({ app, loading, dashboard }))(Dashboard));

